<template>
  <div class="head-stack">
    <slot name="left"></slot>
    <van-image
      round
      width="25px"
      height="25px"
      v-for="(item, index) in url"
      :src="item"
      :key="index"
      :style="`margin-left:${index == 0 ? 0 : overlap}px`"
    />
    <slot name="right" />
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
defineProps({
  url: {
    type: Array,
    default: () => {
      return [
        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
      ]
    }
  },
  overlap: {
    type: Number,
    default: -10
  }
})
</script>

<style scoped lang='scss'>
.head-stack {
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  align-items: center;
  .van-image {
    position: relative;
  }
}
</style>